<template>
  <div class="login">
    <div class="container">
      <p style="font-size: 16px;font-weight: bold">登录</p>
      <div style="width: 90%;margin-left: 10px">
        <svg class="icon" aria-hidden="true" style="font-size: 16px;">
          <use xlink:href="#icon-fl-renyuan"></use>
        </svg>
        <input class="inputText" type="text" v-model="phone" placeholder="phone">
      </div>
      <div style="width: 90%;margin-bottom: 10px;margin-left: 10px">
        <svg class="icon" aria-hidden="true" style="font-size: 16px;color: #666">
          <use xlink:href="#icon-mima"></use>
        </svg>
        <input class="inputText" type="password" v-model="password" placeholder="password">
      </div>
      <div style="width: 90%;height: 15px;position: relative"><span style="float: left;margin-left: 25px"><input type="checkbox" v-model="driverLogin"><span style="color: #666;margin-left: 5px;position: relative;top: -1px">司机登录</span></span><span style="color: #55bde5;position: absolute;right: -10px">忘记密码？</span></div>
      <div style="margin-top: 30px"><input class="inputButton1" type="button" @click="login" value="登录"></div>

      <div style="margin-top: 5px"><input class="inputButton2" type="button" value="前往注册"></div>
    </div>
  </div>
</template>

<script>
  import {driverLogin, passengerLogin} from "../../../api";
  export default {
    name: "login",
    data() {
      return {
        phone: '',
        password: '',
        driverLogin: false,
        lng: '',
        lat: ''
      }
    },
    created() {
      let _this = this
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function geoSuccess(event) {
          _this.lng = event.coords.longitude
          _this.lat = event.coords.latitude
        },function geoError(event) {
          console.log("Error code " + event.code + ". " + event.message);
        });
      }
    },
    methods: {
      login: function () {
        let _this = this
        if(this.driverLogin === false) {
          let params = new URLSearchParams();
          params.append('phone', _this.phone);
          params.append('userPwd', _this.password);
          passengerLogin(params).then(res => {
            if (res.success === true && res.result.phone != null) {
              localStorage.token = res.result.token
              _this.$store.state.userInfo = res.result
              _this.$router.push({ path: '/' })
            }
          })
        }else {
          let params = new URLSearchParams();
          params.append('phone', _this.phone);
          params.append('userPwd', _this.password);
          params.append('driverLongitude', _this.lng);
          params.append('driverLatitude', _this.lat);
          driverLogin(params).then(res => {
            if (res.success === true && res.result.phone != null) {
              console.log(res)
              localStorage.token = res.result.token
              _this.$store.state.driverInfo = res.result
              _this.$router.push({ path: '/driver/home' })
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
.login {
  position: absolute;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  font-size: 12px;
  color: #333;
}
.container{
  margin: 0 auto;
  width: 70%;
  padding: 20px 15px 20px 15px;
  background-color: #FFF;
  margin-top: 40px;
  box-shadow: 0px 0px 10px #CCC;
}
svg{
  position: relative;
  top: 5px;
}
.inputText{
  width: 75%;
  height: 15px;
  margin-left: 10px;
  padding: 10px;
  outline:none;
  border: none;
  border-bottom: solid 1px #dcdcdc;
  color: #575757;
}
.inputText:focus{
  outline:none;
  border-bottom: solid 1px #b3b3b3;
  transition: all .25s;
}
.inputButton1{
  width: 200px;
  padding: 5px;
  outline: none;
  border: none;
  color: #FFF;
  background-color: #4a4c5b;
  border-radius: 3px;
}
.inputButton2{
  width: 200px;
  padding: 5px;
  outline: none;
  border: none;
  color: #4a4c5b;
  background-color: #FFF;
  border: solid 1px #4a4c5b;
  border-radius: 3px;
}
</style>
